<template>
    <van-row class="container">
        <van-row class="details">
            <van-row style="height: 50px">
                <van-col :span="6" class="vote-number">
                    {{data.voteItemNumber}}号
                </van-col>
                <van-col :span="18" class="vote-data">
                    <span>{{data.voteItemTitle}}</span>
                    <span>票数:<span class="details-font">{{data.voteItemCount}}</span></span>
                </van-col>
            </van-row>
            <van-row style="padding: 0 10px">
                <img  :src="data.voteItemImg"/>
            </van-row>
            <van-row>
                <div class="ql-container ql-snow">
                    <div class="ql-editor"  v-html="data.voteItemContent"></div>
                </div>
            </van-row>
        </van-row>
        <van-row style="margin: 10px 15px 12vh 15px">
            <van-button color="#1A4262"  class="vote-btn" block @click="checkPrama">为他投票</van-button>
        </van-row>
        <Verify
                @success="handleVote"
                :captchaType="'blockPuzzle'"
                ref="verify"
        ></Verify>
        <van-popup
                v-model="showSubscribe"
                closeable
                close-icon="close"
                :style="{ height: '40%' ,width:'70%'}"
        >
            <van-row style="margin-top: 15%;">长按关注公众号后进行投票</van-row>
            <van-row style="text-align: center">
                <van-image style="width:193px" :src="ewm"></van-image>
            </van-row>
        </van-popup>
    </van-row>
</template>

<script>
    import {frontRankingCheck, frontVoteByUser, getItemDetails, getServerTime, verification} from "../../api/vote";
    import {getToken} from "../../utils/auth";
    import Verify from '../../components/verifition/Verify'
    import {getUrlKey} from "@/utils/url";

    export default {
        name: "vote-details",
        data(){
            return{
                data:{},
                showSubscribe:false,
                start:false,
                ewm:require("../../assets/image/ewm.jpg"),
            }
        },
        components: {
            Verify
        },
        mounted(){
            const voteId =getUrlKey("voteId") || localStorage.getItem("voteId") ;
            if(voteId===null||voteId===undefined){
                this.$router.push("/501")
            }
            else{
                getServerTime(voteId).then(res=>{
                    if(res.data.result === -1){
                        this.start=false;
                        this.currentTime = res.data.number;
                        this.timeData = res.data.number;
                    }
                    else if(res.data.result === 1){
                        this.start=true;
                        this.currentTime = res.data.number;
                        this.timeData = res.data.number;
                    }
                })
                localStorage.setItem("voteId",voteId);
            }
            getItemDetails(this.$route.query.itemId).then(res=>{
                this.data = res.data;
                this.$wxShare("我在参加河南省科技馆LOGO征集入围作品公众投票活动","我是"+res.data.voteItemNumber+"号作品，请快来给我投票吧",window.location.href,res.data.voteItemImg);
            })

        },
        methods:{
            handleVote(params){

                    let postdata = {
                        captchaVerification:params.captchaVerification,
                        voteId:localStorage.getItem("voteId"),
                        itemId:this.data.id
                    }
                verification(params).then(res=>{
                    if(res.data.repCode==="0000"){
                        return frontVoteByUser(postdata)
                    }
                    else{
                        this.$toast({
                            message:"验证码验证失败",
                            type:"fail"
                        })
                    }
                }).then((res)=>{
                    this.$toast({
                        message:res.data.message,
                        type:res.data.rescode===0?"success":"fail"
                    })
                    getItemDetails(this.$route.query.itemId).then(res=>{
                        this.data = res.data
                    })
                })
            },
            checkPrama(){
                if(!this.start){
                    this.$toast("活动还未开始")
                }
                else{
                    if(!getToken()){
                        this.toLogin(window.location.href)
                    }
                    else{
                        let postdata = {
                            voteId:localStorage.getItem("voteId"),
                            itemId:this.data.id
                        }
                        frontRankingCheck(postdata).then(res=>{
                            if(res.data.rescode===0){
                                //判断当前用户当天是否投票达到上限
                                this.$refs.verify.show();
                            }
                            else if(res.data.rescode === 2){
                                this.showSubscribe = true;
                            }
                            else{
                                this.$toast({
                                    message:res.data.message,
                                })
                            }
                        })
                    }
                }

            },
        }
    }
</script>

<style scoped>
    .details{
        margin: 15px ;
        border: 1px solid;
    }
    .details-font{
            color: #1A4262;
            font-family: HYGangYiTiJ;
            font-weight: 600;
    }
.vote-number{
    height: 50px;
    line-height: 50px;
    text-align: right;
    padding-right: 10px;
    background-color: #F6DE60;
}
    .vote-data{
        height: 50px;
        padding-left: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }
    .vote-btn{
        border-radius: 0;
    }
</style>
<style>
    img{
        width: 100%;
    }
    .ql-container.ql-snow {
        border: 0;
    }
    p{
        text-align: left;
        line-height: 1.8;
    }
</style>
